//
//  locationPreviewView.swift
//  map
//
//  Created by Aoyun on 20/01/2025.
//

import SwiftUI

struct locationPreviewView: View {
    @Environment(LocationViewModel.self) private var vm
    let location: Location
    var body: some View {
        HStack(alignment: .bottom) {
            VStack(alignment: .leading, spacing: 16) {
                image
                title
            }
            VStack(spacing: 8) {
                learnBtn
            }
        }
        .padding(20)
        .background(RoundedRectangle(cornerRadius: 10)
            .fill(.ultraThinMaterial)
            .offset(y: 65)
        )
        .cornerRadius(10)
    }
}

#Preview {
    ZStack {
        Color.green
        locationPreviewView(location: LocationsDataService.locations.first!).padding()
            .environment(LocationViewModel())
    }
}

extension locationPreviewView {
    private var image: some View {
        VStack {
            if let imageNames = location.imageNames.first {
                Image(imageNames)
                    .resizable()
                    .scaledToFill()
                    .frame(width: 100, height: 100)
                    .cornerRadius(10)
            }
        }
        .padding(6)
        .background(.white)
        .cornerRadius(10)
    }

    private var title: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text(location.name)
                .font(.title2)
            Text(location.cityName)
                // 子标题
                .font(.subheadline)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .cornerRadius(10)
    }

    private var learnBtn: some View {
        VStack {
            Button {
                vm.showLocationDetail = location
            } label: {
                Text("Lean more")
                    .font(.headline)
                    .frame(width: 125, height: 35)
            }
            .buttonStyle(BorderedProminentButtonStyle())
            Button {
                vm.updateNextBtn()
            } label: {
                Text("Next")
                // 标题
                    .font(.headline)
                    .frame(width: 125, height: 35)
            }
            .buttonStyle(BorderedButtonStyle())
        }
    }
}
